<template>
    <div class="person">
        <h2>姓名：{{ person.name }},年龄：{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script lang="ts" setup name="Person">  
    import {reactive, toRefs} from 'vue';
    let person = reactive({
        name: '真米酒',
        age: 19
    })
    //解构
    let {name,age} = toRefs(person);
    let c = toRefs(person);
    console.log(c)
    function changeName(){
        name.value += 'a';
    }
    function changeAge(){
        person.age += 1;
    }
    

</script>

<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>